.survey-step__section-wrapper {
	margin: 0 auto 2em;
	max-width: 500px;
}

// Both Verticals Lists
.survey-step__verticals-wrapper {
	position: relative;
}

.survey-step__question {
	text-align: center;
	font-size: 14px;
	font-weight: 600;
}

// Primary Verticals List
.survey-step__verticals {
	pointer-events: none;
	opacity: 0.4;
	transform: translateX( -20% ) scale( 0.8 );
	transition: filter 0.15s linear, opacity 0.15s ease-out, transform 0.15s ease-out;

	&.active {
		pointer-events: auto;
		opacity: 1;
		transform: translateX( 0 ) scale( 1 );
	}

	// This limits the blur filter to Safari, as other browsers can't handle the
	// awesomeness of transitioning blurs.
	@supports (overflow:-webkit-marquee) and (justify-content:inherit) {
		filter: blur( 3px );

		&.active {
			filter: blur( 0 );
		}
	}
}

// Sub Verticals List
.survey-step__sub-verticals {
	position: absolute;
		top: 0;
		left: 0;
		right: 0;
	min-height: 500px;
	padding: 0;
	margin-bottom: 24px;
	pointer-events: none;
	opacity: 0;
	transform: translateY( 50px );
	transition: opacity 0.2s ease-out, transform 0.2s ease-out;

	&.active {
		pointer-events: auto;
		opacity: 1;
		transform: translateY( 0 );
	}

	// Override HeaderCake's margin
	.header-cake.card {
		margin-top: 0;
	}
}


// Verticals List Item
.survey-step__vertical {
	margin-bottom: 0;
	cursor: pointer;
}

.survey-step__vertical__icon {
	vertical-align: bottom;
	margin-top: -2px;
	margin-right: 16px;
	color: lighten( $gray, 10% );

	.survey-step__vertical:hover & {
		color: $gray;
	}
}

.survey__verticals-list {
	text-align: center;
}

.survey__vertical {
	margin: 8px;
	border-bottom-width: 1px;

	&:hover {
		.survey__vertical-label {
			color: $blue-medium;
		}
		.survey__vertical-chevron {
			color: $blue-medium;
			animation: survey__vertical-chevron-wiggle 1.5s ease infinite;
		}
	}

	&:active {
		border-top-width: 1px;
		background: lighten( $gray, 30% );
	}
}

.survey__vertical-label {
	margin: 10px;
	font-weight: 400;
	color: darken( $gray, 30% )
}

.survey__vertical-chevron {
	color: lighten( $gray, 20% );
	pointer-events: none;
}

.survey__other {
	margin: 0 20px 2em;
	position: relative;
}

@include breakpoint( ">480px" ) {
	.survey__other {
		margin: 0 auto 2em;
		max-width: 500px;
	}
}

input.survey__other-write-in {
	padding-right: 76px;
}

.survey__other-button {
	position: absolute;
	top: 6px;
	right: 6px;
	&.is-compact {
		text-transform: none;
	}
}

.survey__other-copy {
	text-align: center;
	color: lighten( $gray, 20% );
	padding-top: 0.5em;
}

@keyframes survey__vertical-chevron-wiggle {
	0% {
		transform: none;
	}
	60% {
		transform: none;
	}
	70% {
		transform: translate(5px, 0);
	}
	80% {
		transform: none;
	}
	90% {
		transform: translate(5px, 0);
	}
	100% {
		transform: none;
	}
}
